* {
  box-sizing: border-box;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
  margin: 0;
  padding: 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
ul,
li,
ol {
  list-style: none;
}

input {
  outline: none;
  border: none;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none !important;
}

input[type="number"] {
  -moz-appearance: textfield;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  background-color: #f2f2f2;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;
}

@media screen and (min-width: 820px) {
  html {
    font-size: 80px !important;
    /*no*/
  }
}

@media screen and (max-width: 820px) {
  html {
    font-size: 70px !important;
    /*no*/
  }
}

// 不可选中
.overlay {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}

// 无滑动条
.no-scrollbar {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  &::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
}

.pretty-bar {
  // 滚动条整体
  &::-webkit-scrollbar {
    z-index: 50;
    width: 10px;
    height: 3px;
    background: #1c2541;
  }
  // 滚动条滑道
  &::-webkit-scrollbar-track {
    background-color: #1c2541;
  }
  // 滚动滑块样式
  &::-webkit-scrollbar-thumb {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #315397;
    transition: all 0.2s;
    height: 10px;
    border: 1px solid #315397;
  }
  // 滚动条的样式，是可以跟 :hover 伪类叠加使用的
  // 滚动条鼠标悬浮时的样式
  &:hover::-webkit-scrollbar-thumb {
    transition: all 0.2s;
  }
  // 滚动条上下的箭头按钮
  &::-webkit-scrollbar-button {
    display: none;
  }
  &::-webkit-scrollbar-corner {
    display: none;
  }
}

.overflow-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-contanier {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  &.pc-container{
    max-width: 650px;
    background-color: #fff;
    padding: 10px 15px;
    margin: 0 auto;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgb(195, 194, 194);
  }
  &.player-pc{
    // display: block;
    flex-direction: row;
    background-color: #fff;
    padding: 10px 0 10px 15px;
    margin: 0 auto;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgb(195, 194, 194);
  }
}

.foot-btns {
  width: 100%;
  padding: 10px 15px;
  background-color: #fff;
  overflow: hidden;
}

.content-place {
  height: 15px;
  background-color: #fff;
}

.index-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  &.app-contanier.pc-container{
    width: 100%;
    max-width: none;
  }
  .index-tabs.van-tabs {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .van-tabs__content {
      flex: 1;
      overflow: hidden;
      .van-tab__panel {
        .no-scrollbar;
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #f2f2f2;
      }
    }
    .van-tabs__nav{
      &::after{
        content: '';
        width: 100%;
        /* prettier-ignore */
        height: 2PX;
        background-color: #ececec;
        transform: scaleY(0.5);
        position: absolute;
        left: 0;
        /* prettier-ignore */
        bottom: 14PX;
      }
    }
  }
  .index-tabs.el-tabs {
    .el-tabs__header {
      background-color: #fff;
      width: 240px;
      .el-tabs__nav{
        width: 100%;
        .el-tabs__item{
          justify-content: center;
          &.is-active{
            background-color: var(--vb-primary-color-light-5);
          }
          .custom-tabs-label{
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            padding: 0 20px;
            i{
              font-size: 20px;
            }
            span{
              padding-left: 12px;
              font-size: 18px;
            }
          }
        }
      }
      &.is-left {
        margin-right: 0;
      }
    }
    .el-tabs__content {
      height: 100%;
      padding: 15px;
      .el-tab-pane {
        width: 100%;
        height: 100%;
        background-color: #fff;
        // border-radius: 6px;
        // padding: 10px;
        display: flex;
        flex-direction: column;
        .video-list {
          width: 100%;
          flex: 1;
        }
        .page-foot {
          height: 50px;
          display: flex;
          align-items: center;
          /* prettier-ignore */
          border-top: 1PX solid #ececec;
          .page-spce{
            flex: 1;
          }
        }
      }
    }
  }
}

.round-btn {
  width: 55px;
  height: 55px;
  background-color: var(--vb-primary-color);
  box-shadow: 0px 0px 10px var(--vb-primary-color-light);
  font-size: 30px;
  color: #fff;
  text-align: center;
  line-height: 55px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  &.next {
    background-color: #fff;
    color: var(--vb-primary-color);
    box-shadow: 0px 0px 10px rgb(195, 194, 194);
  }
  &.info {
    &.like{
      color: #b62242;
    }
    &.collect{
      color: #eda319;
    }
  }
  .sdlive {
    font-size: 30px;
  }
}

.van-dialog {
  background-color: #ffffff;
  box-shadow: 0 0 10px #d6d6d6;
  .van-dialog__content {
    padding: 10px 0;
  }
}
.van-password-input.pwd-input {
  .van-password-input__security,
  .van-password-input__item {
    &::after {
      border-color: #999;
    }
  }
}

#player-container{
  &.live-player {
    .xgplayer-replay {
      display: none !important;
    }
  }
}